<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Gallery - SMS Admin Bootstrap</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="sms">

        <!-- google font -->
        <link href="http://fonts.googleapis.com/css?family=Aclonica:regular" rel="stylesheet" type="text/css" />
        
        <!-- styles -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/bootstrap-responsive.css" rel="stylesheet">
        <link href="css/sms.css" rel="stylesheet">
        <link href="css/sms-responsive.css" rel="stylesheet">
        <link href="css/sms-helper.css" rel="stylesheet">
        <link href="css/sms-icon.css" rel="stylesheet">
        <link href="css/font-awesome.css" rel="stylesheet">
        <link href="css/animate.css" rel="stylesheet">
        <link href="css/uniform.default.css" rel="stylesheet">
        
        <link href="css/prettyPhoto.css" rel="stylesheet">
        
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>
        <!-- section header -->
        <header class="header" data-spy="affix" data-offset-top="0">
            <!--nav bar helper-->
            <div class="navbar-helper">
                <div class="row-fluid">
                    <!--panel site-name-->
                    <div class="span2">
                        <div class="panel-sitename">
                            <h2><a href="index.html"><span class="color-teal">SMS</span>&alpha;</a></h2>
                        </div>
                    </div>
                    <!--/panel name-->

                    <div class="span6">
                        <!--panel search-->
                        <div class="panel-search">
                            <form>
                                <div class="input-icon-append">
                                    <button type="submit" rel="tooltip-bottom" title="search" class="icon"><i class="icofont-search"></i></button>
                                    <input class="input-large search-query grd-white" maxlength="23" placeholder="Search here..." type="text">
                                </div>
                            </form>
                        </div><!--/panel search-->
                    </div>
                    <div class="span4">
                        <!--panel button ext-->
                        <div class="panel-ext">
                            <div class="btn-group">
                                <!--notification-->
                                <a class="btn btn-danger btn-small" data-toggle="dropdown" href="#" title="3 notification">3</a>
                                <ul class="dropdown-menu dropdown-notification">
                                    <li class="dropdown-header grd-white"><a href="#">View All Notifications</a></li>
                                    <li class="new">
                                        <a href="#">
                                            <div class="notification">John Doe commented on a post</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Lorem ipsum <small class="helper-font-small"> john doe</small></h4>
                                                    <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="new">
                                        <a href="#">
                                            <div class="notification">Request new order</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Tortor dapibus</h4>
                                                    <p>Vegan fanny pack odio cillum wes anderson 8-bit.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="new">
                                        <a href="#">
                                            <div class="notification">Request new order</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Lacinia non</h4>
                                                    <p>Messenger bag gentrify pitchfork tattooed craft beer.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="notification">John Doe commented on a post</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Lorem ipsum <small class="helper-font-small"> john doe</small></h4>
                                                    <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="notification">Request new order</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Tortor dapibus</h4>
                                                    <p>Vegan fanny pack odio cillum wes anderson 8-bit.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="notification">Request new order</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Lacinia non</h4>
                                                    <p>Messenger bag gentrify pitchfork tattooed craft beer.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <!-- <li class="dropdown-footer"><a href=""></a></li> -->
                                </ul><!--notification-->
                            </div>
                            <div class="btn-group">
                                <a class="btn btn-inverse btn-small dropdown-toggle" data-toggle="dropdown" href="#">
                                    Shortcut
                                </a>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                    <li><a tabindex="-1" href="calendar.html">Calendar</a></li>
                                    <li><a tabindex="-1" href="invoice.html">Invoice</a></li>
                                    <li><a tabindex="-1" href="message.html">Message</a></li>
                                    <li class="divider"></li>
                                    <li class="dropdown-submenu">
                                        <a tabindex="-1" href="#">Sample Page</a>
                                        <ul class="dropdown-menu">
                                            <li><a tabindex="-1" href="pricing.html">Pricing</a></li>
                                            <li><a tabindex="-1" href="bonus-page/resume/index.html">Resume</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown-submenu">
                                        <a tabindex="-1" href="#">Error Page</a>
                                        <ul class="dropdown-menu">
                                            <li><a tabindex="-1" href="403.html">Error 403</a></li>
                                            <li><a tabindex="-1" href="404.html">Error 404</a></li>
                                            <li><a tabindex="-1" href="405.html">Error 405</a></li>
                                            <li><a tabindex="-1" href="500.html">Error 500</a></li>
                                            <li><a tabindex="-1" href="503.html">Error 503</a></li>
                                            <li><a tabindex="-1" href="under-construction.html">Under Construction</a></li>
                                            <li><a tabindex="-1" href="coming-soon.html">Coming Son</a></li>
                                        </ul>
                                    </li>
                                    <li class="divider"></li>
                                    <li><a tabindex="-1" href="#">Something else here</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <a class="btn btn-inverse btn-small" href="#">Other Action</a>
                            </div>
                            <div class="btn-group user-group">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <img class="corner-all" align="middle" src="img/user-thumb.jpg" title="John Doe" alt="john doe" /> <!--this for display on PC device-->
                                    <button class="btn btn-small btn-inverse">John Doe</button> <!--this for display on tablet and phone device-->
                                </a>
                                <ul class="dropdown-menu dropdown-user" role="menu" aria-labelledby="dLabel">
                                    <li>
                                        <div class="media">
                                            <a class="pull-left" href="#">
                                                <img class="img-circle" src="img/user.jpg" title="profile" alt="profile" />
                                            </a>
                                            <div class="media-body description">
                                                <p><strong>John Doe</strong></p>
                                                <p class="muted">johndoe@mail.com</p>
                                                <p class="action"><a class="link" href="#">Activity</a> - <a class="link" href="#">Setting</a></p>
                                                <a class="btn btn-primary btn-small btn-block">View Profile</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="dropdown-footer">
                                        <div>
                                            <a class="btn btn-small pull-right" href="login.html">Logout</a>
                                            <a class="btn btn-small" href="#">Add Account</a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div><!--panel button ext-->
                    </div>
                </div>
            </div><!--/nav bar helper-->
        </header>

        <!-- section content -->
        <section class="section">
            <div class="row-fluid">
                <!-- span side-left -->
                <div class="span1">
                    <!--side bar-->
                    <aside class="side-left">
                        <ul class="sidebar">
                            <li>
                                <a href="index.html" title="dashboard">
                                    <div class="helper-font-24">
                                        <i class="icofont-dashboard"></i>
                                    </div>
                                    <span class="sidebar-text">Dashboard</span>
                                </a>
                            </li>
                            <li>
                                <a href="interface.html" title="interface">
                                    <div class="helper-font-24">
                                        <i class="icofont-magnet"></i>
                                    </div>
                                    <span class="sidebar-text">Interface</span>
                                </a>
                            </li>
                            <li class="active">
                                <a href="form.html" title="form">
                                    <div class="badge badge-important">3</div>
                                    <div class="helper-font-24">
                                        <i class="icofont-edit"></i>
                                    </div>
                                    <span class="sidebar-text">Form</span>
                                </a>
                                <ul class="sub-sidebar-form corner-top shadow-white">
                                    <li class="title muted">Quick Upload</li>
                                    <li>
                                        <input type="file" data-form="uniform" onchange="alert('your progres uploading file...')" />
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="form.html" title="form element" class="corner-all">
                                            <i class="icofont-file"></i>
                                            <span class="sidebar-text">Form Element</span>
                                        </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="code-editor.html" title="code editor" class="corner-all">
                                            <i class="icofont-book"></i>
                                            <span class="sidebar-text">Code Editor</span>
                                        </a>
                                    </li>
                                    <li class="active">
                                        <a href="gallery.html" title="gallery" class="corner-all">
                                            <i class="icofont-picture"></i>
                                            <span class="sidebar-text">Gallery</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="charts.html" title="charts">
                                    <div class="helper-font-24">
                                        <i class="icofont-bar-chart"></i>
                                    </div>
                                    <span class="sidebar-text">charts</span>
                                </a>
                            </li>
                            <li>
                                <a href="tables.html" title="table">
                                    <div class="helper-font-24">
                                        <i class="icofont-table"></i>
                                    </div>
                                    <span class="sidebar-text">Tables</span>
                                </a>
                            </li>
                            <li>
                                <a href="grids.html" title="grids">
                                    <div class="helper-font-24">
                                        <i class="icofont-columns"></i>
                                    </div>
                                    <span class="sidebar-text">Grids</span>
                                </a>
                            </li>
                            <li>
                                <a href="icons.html" title="icons">
                                    <div class="helper-font-24">
                                        <i class="icofont-star"></i>
                                    </div>
                                    <span class="sidebar-text">Icons</span>
                                </a>
                            </li>
                            <li>
                                <a href="widgets.html" title="widgets">
                                    <div class="helper-font-24">
                                        <i class="icofont-reorder"></i>
                                    </div>
                                    <span class="sidebar-text">Widgets</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" title="more">
                                    <div class="badge badge-important">5</div>
                                    <div class="helper-font-24">
                                        <i class="icofont-th-large"></i>
                                    </div>
                                    <span class="sidebar-text">More</span>
                                </a>
                                <ul class="sub-sidebar corner-top shadow-silver-dark">
                                    <li>
                                        <a href="404.html" title="not found">
                                            <div class="helper-font-24">
                                                <i class="icofont-warning-sign"></i>
                                            </div>
                                            <span class="sidebar-text">404</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="login.html" title="login">
                                            <div class="helper-font-24">
                                                <i class="icofont-lock"></i>
                                            </div>
                                            <span class="sidebar-text">Login</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="invoice.html" title="invoice">
                                            <div class="helper-font-24">
                                                <i class="icofont-barcode"></i>
                                            </div>
                                            <span class="sidebar-text">Invoice</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="pricing.html" title="pricing table">
                                            <div class="helper-font-24">
                                                <i class="icofont-briefcase"></i>
                                            </div>
                                            <span class="sidebar-text">Pricing</span>
                                        </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="bonus-page/resume/index.html" title="resume">
                                            <div class="helper-font-24">
                                                <i class="icofont-user"></i>
                                            </div>
                                            <span class="sidebar-text">Resume</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </aside><!--/side bar -->
                </div><!-- span side-left -->
                
                <!-- span content -->
                <div class="span9">
                    <!-- content -->
                    <div class="content">
                        <!-- content-header -->
                        <div class="content-header">
                            <ul class="content-header-action pull-right">
                                <li>
                                    <a href="#">
                                        <div class="badge-circle grd-green color-white"><i class="icofont-plus-sign"></i></div>
                                        <div class="action-text color-green">8765 <span class="helper-font-small color-silver-dark">Visits</span></div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#">
                                        <div class="badge-circle grd-teal color-white"><i class="icofont-user-md"></i></div>
                                        <div class="action-text color-teal">1437 <span class="helper-font-small color-silver-dark">Users</span></div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#">
                                        <div class="badge-circle grd-orange color-white">$</div>
                                        <div class="action-text color-orange">4367 <span class="helper-font-small color-silver-dark">Orders</span></div>
                                    </a>
                                </li>
                            </ul>
                            <h2><i class="icofont-picture"></i> Gallery Sample</h2>
                        </div><!-- /content-header -->
                        
                        <!-- content-breadcrumb -->
                        <div class="content-breadcrumb">
                            <!--breadcrumb-nav-->
                            <ul class="breadcrumb-nav pull-right">
                                <li class="divider"></li>
                                <li class="btn-group">
                                    <a href="#" class="btn btn-small btn-link dropdown-toggle" data-toggle="dropdown">
                                        <i class="icofont-cogs"></i> Controls
                                        <i class="icofont-caret-down"></i>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li><a tabindex="-1" href="#" class="getDataSelected">Get Data</a></li>
                                        <li><a tabindex="-1" href="#">Delete All</a></li>
                                        <li class="divider"></li>
                                        <li><a tabindex="-1" href="#">Other Action</a></li>
                                    </ul>
                                </li>
                                <li class="divider"></li>
                                <li class="btn-group">
                                    <a href="#" class="btn btn-small btn-link">
                                        <i class="icofont-money"></i> Orders <span class="color-red">(+12)</span>
                                    </a>
                                </li>
                            </ul><!--/breadcrumb-nav-->
                            
                            <!--breadcrumb-->
                            <ul class="breadcrumb">
                                <li><a href="index.html"><i class="icofont-home"></i> Dashboard</a> <span class="divider">&rsaquo;</span></li>
                                <li><a href="form.html">Form</a> <span class="divider">&rsaquo;</span></li>
                                <li class="active">Gallery</li>
                            </ul><!--/breadcrumb-->
                        </div><!-- /content-breadcrumb -->
                        
                        <!-- content-body -->
                        <div class="content-body">
                            <!-- gallery -->
                            <div class="row-fluid">
                                <div class="span12">
                                    <div class="gallery">
                                        <div class="gallery-controls top">
                                            <ul class="pager helper-font-small">
                                                <li class="previous disabled">
                                                    <a href="#">&larr; First</a>
                                                </li>
                                                <li class="disabled"><a href="#">Prev</a></li>
                                                <li class="disabled"><a href="#">1</a></li>
                                                <li><a href="#">3</a></li>
                                                <li><a href="#">4</a></li>
                                                <li><a href="#">5</a></li>
                                                <li><a href="#">6</a></li>
                                                <li><a href="#">Next</a></li>
                                                <li class="next">
                                                    <a href="#">Last &rarr;</a>
                                                </li>
                                            </ul>
                                            <div class="gallery-category">
                                                <div class="pull-right">
                                                    <span>page 1 of 8</span>
                                                    <span>|</span>
                                                    <div class="btn-group">
                                                        <input data-form="uniform" class="gallery-selector" type="checkbox" />
                                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                                            <i class="icon-cog" style="margin-top: -7px;"></i>
                                                        </a>
                                                        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                                            <li><a tabindex="-1" href="#" class="getDataSelected">Get Data</a></li>
                                                            <li><a tabindex="-1" href="#">Delete All</a></li>
                                                            <li class="divider"></li>
                                                            <li><a tabindex="-1" href="#">Other Action</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="portfolio-filter">
                                                    <span>Categories :</span>
                                                    <span class="label"><a class="filterable" href="#all" rel="all">All</a></span>
                                                    <span class="label"><a class="filterable" href="#design" rel="design">Design</a></span>
                                                    <span class="label"><a class="filterable" href="#portofolio" rel="portofolio">Portofolio</a></span>
                                                    <span class="label"><a class="filterable" href="#uncategories" rel="uncategories">Uncategories</a></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="gallery-content">
                                            <ul class="thumbnails" id="portfolio-list">
                                                <li class="design">
                                                    <!-- use checkbox for helper event -->
                                                    <input class="selecter" type="checkbox" name="item[]" value="1.jpg" />
                                                    <div class="thumbnail">
                                                        <img src="img/sample/thumbnails/t_1.jpg" width="120" height="120" alt=""/>
                                                        <div class="thumbnail-control">
                                                            <div class="controls">
                                                                <a href="img/sample/fullscreen/1.jpg" rel="prettyPhoto[gallery]" title="Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est."><i class="icofont-search"></i></a>
                                                                <a href="#" title="edit"><i class="icofont-edit"></i></a>
                                                                <a href="#modalConfirm" title="delete" data-toggle="modal"><i class="icofont-trash"></i></a>
                                                                <p class="description">Lorem Ipsum</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="portofolio">
                                                    <input class="selecter" type="checkbox" name="item[]" value="2.jpg" />
                                                    <div class="thumbnail">
                                                        <img src="img/sample/thumbnails/t_2.jpg" width="120" height="120" alt=""/>
                                                        <div class="thumbnail-control">
                                                            <div class="controls">
                                                                <a href="img/sample/fullscreen/2.jpg" rel="prettyPhoto[gallery]" title="Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est."><i class="icofont-search"></i></a>
                                                                <a href="#" title="edit"><i class="icofont-edit"></i></a>
                                                                <a href="#modalConfirm" title="delete" data-toggle="modal"><i class="icofont-trash"></i></a>
                                                                <p class="description">Lorem Ipsum</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="portofolio">
                                                    <input class="selecter" type="checkbox" name="item[]" value="3.jpg" />
                                                    <div class="thumbnail">
                                                        <img src="img/sample/thumbnails/t_3.jpg" width="120" height="120" alt=""/>
                                                        <div class="thumbnail-control">
                                                            <div class="controls">
                                                                <a href="img/sample/fullscreen/3.jpg" rel="prettyPhoto[gallery]" title="Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est."><i class="icofont-search"></i></a>
                                                                <a href="#" title="edit"><i class="icofont-edit"></i></a>
                                                                <a href="#modalConfirm" title="delete" data-toggle="modal"><i class="icofont-trash"></i></a>
                                                                <p class="description">Lorem Ipsum</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="design">
                                                    <input class="selecter" type="checkbox" name="item[]" value="4.jpg" />
                                                    <div class="thumbnail">
                                                        <img src="img/sample/thumbnails/t_4.jpg" width="120" height="120" alt=""/>
                                                        <div class="thumbnail-control">
                                                            <div class="controls">
                                                                <a href="img/sample/fullscreen/4.jpg" rel="prettyPhoto[gallery]" title="Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est."><i class="icofont-search"></i></a>
                                                                <a href="#" title="edit"><i class="icofont-edit"></i></a>
                                                                <a href="#modalConfirm" title="delete" data-toggle="modal"><i class="icofont-trash"></i></a>
                                                                <p class="description">Lorem Ipsum</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="portofolio">
                                                    <input class="selecter" type="checkbox" name="item[]" value="5.jpg" />
                                                    <div class="thumbnail">
                                                        <img src="img/sample/thumbnails/t_5.jpg" width="120" height="120" alt=""/>
                                                        <div class="thumbnail-control">
                                                            <div class="controls">
                                                                <a href="img/sample/fullscreen/5.jpg" rel="prettyPhoto[gallery]" title="Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est."><i class="icofont-search"></i></a>
                                                                <a href="#" title="edit"><i class="icofont-edit"></i></a>
                                                                <a href="#modalConfirm" title="delete" data-toggle="modal"><i class="icofont-trash"></i></a>
                                                                <p class="description">Lorem Ipsum</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="uncategories">
                                                    <input class="selecter" type="checkbox" name="item[]" value="6.jpg" />
                                                    <div class="thumbnail">
                                                        <img src="img/sample/thumbnails/t_6.jpg" width="120" height="120" alt=""/>
                                                        <div class="thumbnail-control">
                                                            <div class="controls">
                                                                <a href="img/sample/fullscreen/6.jpg" rel="prettyPhoto[gallery]" title="Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est."><i class="icofont-search"></i></a>
                                                                <a href="#" title="edit"><i class="icofont-edit"></i></a>
                                                                <a href="#modalConfirm" title="delete" data-toggle="modal"><i class="icofont-trash"></i></a>
                                                                <p class="description">Lorem Ipsum</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="uncategories">
                                                    <input class="selecter" type="checkbox" name="item[]" value="7.jpg" />
                                                    <div class="thumbnail">
                                                        <img src="img/sample/thumbnails/t_7.jpg" width="120" height="120" alt=""/>
                                                        <div class="thumbnail-control">
                                                            <div class="controls">
                                                                <a href="img/sample/fullscreen/7.jpg" rel="prettyPhoto[gallery]" title="Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est."><i class="icofont-search"></i></a>
                                                                <a href="#" title="edit"><i class="icofont-edit"></i></a>
                                                                <a href="#modalConfirm" title="delete" data-toggle="modal"><i class="icofont-trash"></i></a>
                                                                <p class="description">Lorem Ipsum</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="uncategories">
                                                    <input class="selecter" type="checkbox" name="item[]" value="8.jpg" />
                                                    <div class="thumbnail">
                                                        <img src="img/sample/thumbnails/t_8.jpg" width="120" height="120" alt=""/>
                                                        <div class="thumbnail-control">
                                                            <div class="controls">
                                                                <a href="img/sample/fullscreen/8.jpg" rel="prettyPhoto[gallery]" title="Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est."><i class="icofont-search"></i></a>
                                                                <a href="#" title="edit"><i class="icofont-edit"></i></a>
                                                                <a href="#modalConfirm" title="delete" data-toggle="modal"><i class="icofont-trash"></i></a>
                                                                <p class="description">Lorem Ipsum</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="uncategories">
                                                    <input class="selecter" type="checkbox" name="item[]" value="9.jpg" />
                                                    <div class="thumbnail">
                                                        <img src="img/sample/thumbnails/t_9.jpg" width="120" height="120" alt=""/>
                                                        <div class="thumbnail-control">
                                                            <div class="controls">
                                                                <a href="img/sample/fullscreen/9.jpg" rel="prettyPhoto[gallery]" title="Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est."><i class="icofont-search"></i></a>
                                                                <a href="#" title="edit"><i class="icofont-edit"></i></a>
                                                                <a href="#modalConfirm" title="delete" data-toggle="modal"><i class="icofont-trash"></i></a>
                                                                <p class="description">Lorem Ipsum</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="uncategories">
                                                    <input class="selecter" type="checkbox" name="item[]" value="10.jpg" />
                                                    <div class="thumbnail">
                                                        <img src="img/sample/thumbnails/t_10.jpg" width="120" height="120" alt=""/>
                                                        <div class="thumbnail-control">
                                                            <div class="controls">
                                                                <a href="img/sample/fullscreen/10.jpg" rel="prettyPhoto[gallery]" title="Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est."><i class="icofont-search"></i></a>
                                                                <a href="#" title="edit"><i class="icofont-edit"></i></a>
                                                                <a href="#modalConfirm" title="delete" data-toggle="modal"><i class="icofont-trash"></i></a>
                                                                <p class="description">Lorem Ipsum</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="uncategories">
                                                    <input class="selecter" type="checkbox" name="item[]" value="11.jpg" />
                                                    <div class="thumbnail">
                                                        <img src="img/sample/thumbnails/t_11.jpg" width="120" height="120" alt=""/>
                                                        <div class="thumbnail-control">
                                                            <div class="controls">
                                                                <a href="img/sample/fullscreen/11.jpg" rel="prettyPhoto[gallery]" title="Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est."><i class="icofont-search"></i></a>
                                                                <a href="#" title="edit"><i class="icofont-edit"></i></a>
                                                                <a href="#modalConfirm" title="delete" data-toggle="modal"><i class="icofont-trash"></i></a>
                                                                <p class="description">Lorem Ipsum</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="uncategories">
                                                    <input class="selecter" type="checkbox" name="item[]" value="12.jpg" />
                                                    <div class="thumbnail">
                                                        <img src="img/sample/thumbnails/t_12.jpg" width="120" height="120" alt=""/>
                                                        <div class="thumbnail-control">
                                                            <div class="controls">
                                                                <a href="img/sample/fullscreen/12.jpg" rel="prettyPhoto[gallery]" title="Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est."><i class="icofont-search"></i></a>
                                                                <a href="#" title="edit"><i class="icofont-edit"></i></a>
                                                                <a href="#modalConfirm" title="delete" data-toggle="modal"><i class="icofont-trash"></i></a>
                                                                <p class="description">Lorem Ipsum</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="uncategories">
                                                    <input class="selecter" type="checkbox" name="item[]" value="13.jpg" />
                                                    <div class="thumbnail">
                                                        <img src="img/sample/thumbnails/t_13.jpg" width="120" height="120" alt=""/>
                                                        <div class="thumbnail-control">
                                                            <div class="controls">
                                                                <a href="img/sample/fullscreen/13.jpg" rel="prettyPhoto[gallery]" title="Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est."><i class="icofont-search"></i></a>
                                                                <a href="#" title="edit"><i class="icofont-edit"></i></a>
                                                                <a href="#modalConfirm" title="delete" data-toggle="modal"><i class="icofont-trash"></i></a>
                                                                <p class="description">Lorem Ipsum</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="uncategories">
                                                    <input class="selecter" type="checkbox" name="item[]" value="14.jpg" />
                                                    <div class="thumbnail">
                                                        <img src="img/sample/thumbnails/t_14.jpg" width="120" height="120" alt=""/>
                                                        <div class="thumbnail-control">
                                                            <div class="controls">
                                                                <a href="img/sample/fullscreen/14.jpg" rel="prettyPhoto[gallery]" title="Lorem ipsum dolor sit amet, natoque per at morbi at vestibulum leo, velit non, curabitur ac est."><i class="icofont-search"></i></a>
                                                                <a href="#" title="edit"><i class="icofont-edit"></i></a>
                                                                <a href="#modalConfirm" title="delete" data-toggle="modal"><i class="icofont-trash"></i></a>
                                                                <p class="description">Lorem Ipsum</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="gallery-controls bottom">
                                            <div class="gallery-category">
                                                <div class="pull-right">
                                                    <span>page 1 of 8</span>
                                                    <span>|</span>
                                                    <div class="btn-group dropup">
                                                        <input data-form="uniform" class="gallery-selector" type="checkbox" />
                                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                                            <i class="icon-cog" style="margin-top: -7px;"></i>
                                                        </a>
                                                        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                                            <li><a tabindex="-1" href="#" class="getDataSelected">Get Data</a></li>
                                                            <li><a tabindex="-1" href="#">Delete All</a></li>
                                                            <li class="divider"></li>
                                                            <li><a tabindex="-1" href="#">Other Action</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="portfolio-filter">
                                                    <span>Categories :</span>
                                                    <span class="label"><a class="filterable" href="#all" rel="all">All</a></span>
                                                    <span class="label"><a class="filterable" href="#design" rel="design">Design</a></span>
                                                    <span class="label"><a class="filterable" href="#portofolio" rel="portofolio">Portofolio</a></span>
                                                    <span class="label"><a class="filterable" href="#uncategories" rel="uncategories">Uncategories</a></span>
                                                </div>
                                            </div>
                                            <ul class="pager helper-font-small">
                                                <li class="previous disabled">
                                                    <a href="#">&larr; First</a>
                                                </li>
                                                <li class="disabled"><a href="#">Prev</a></li>
                                                <li class="disabled"><a href="#">1</a></li>
                                                <li><a href="#">3</a></li>
                                                <li><a href="#">4</a></li>
                                                <li><a href="#">5</a></li>
                                                <li><a href="#">6</a></li>
                                                <li><a href="#">Next</a></li>
                                                <li class="next">
                                                    <a href="#">Last &rarr;</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- Modal Confirm -->
                                    <div id="modalConfirm" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                            <h3 id="myModalLabel">Confirm</h3>
                                        </div>
                                        <div class="modal-body">
                                            <p>Are you sure want to delete this images?</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                                            <button class="btn btn-danger">Yes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--/gallery-->
                        </div><!--/content-body -->
                    </div><!-- /content -->
                </div><!-- /span content -->
                
                <!-- span side-right -->
                <div class="span2">
                    <!-- side-right -->
                    <aside class="side-right">
                        <!-- sidebar-right -->
                        <div class="sidebar-right">
                            <!--sidebar-right-header-->
                            <div class="sidebar-right-header">
                                <div class="sr-header-right">
                                    <h2><span class="label label-info">$26,875</span></h2>
                                </div>
                                <div class="sr-header-left">
                                    <p class="bold">Balance</p>
                                    <small class="muted">Dec 30 2012</small>
                                </div>
                            </div><!--/sidebar-right-header-->
                            <!--sidebar-right-control-->
                            <div class="sidebar-right-control">
                                <ul class="sr-control-item">
                                    <li class="active"><a href="#chat" data-toggle="tab" title="Chat"><i class="icofont-comments-alt"></i></a></li>
                                    <li><a href="#contact" data-toggle="tab" title="contacts"><i class="icofont-group"></i></a></li>
                                    <li><a href="#alt1" data-toggle="tab" title="alternative 1"><i class="icofont-flag"></i></a></li>
                                    <li rel="tooltip-bottom" title="view site"><a href="index.html" target="_BLANK"><i class="icofont-external-link"></i></a></li>
                                </ul>
                            </div><!-- /sidebar-right-control-->
                            <!-- sidebar-right-content -->
                            <div class="sidebar-right-content">
                                <div class="tab-content">
                                    <!--chat-->
                                    <div class="tab-pane fade active in" id="chat">
                                        <div class="side-chat">
                                            <!--header part-->
                                            <div class="chat-header">
                                                <div class="chat-action">
                                                    <div class="btn-group pull-right">
                                                        <!--we use data toggle tab for navigate this action-->
                                                        <a class="bg-transparent no-border" href="#contact" data-toggle="tab" title="minimize"><i class="icofont-minus"></i></a>
                                                        <a class="bg-transparent no-border" title="pop out"><i class="icofont-resize-full"></i></a>
                                                        <a class="bg-transparent no-border" href="#contact" data-toggle="tab" title="close"><i class="icofont-remove-sign"></i></a>
                                                    </div>
                                                </div>
                                                <h5><i class="icofont-certificate color-green"></i> Jane smith</h5>
                                            </div>
                                            <!--content part-->
                                            <div class="chat-content">
                                                <div class="chat-in">
                                                    <span class="chat-time">10:45am</span>
                                                    <strong class="chat-user">Jane smith: </strong>
                                                    <div class="chat-text">Lorem ipsum dolor</div>
                                                </div>
                                                <div class="chat-out">
                                                    <span class="chat-time">10:47am</span>
                                                    <strong class="chat-user">me: </strong>
                                                    <div class="chat-text">Erat duis lectus vel wisi, quibusdam aliquam vehicula eleifend ut</div>
                                                </div>
                                                <div class="chat-in">
                                                    <span class="chat-time">10:50am</span>
                                                    <strong class="chat-user">Jane smith: </strong>
                                                    <div class="chat-text">Et sagittis ut vel dolor nullam proin</div>
                                                </div>
                                                <div class="chat-out">
                                                    <span class="chat-time">10:52am</span>
                                                    <strong class="chat-user">me: </strong>
                                                    <div class="chat-text">massa massa quisque sodales id dictumst.</div>
                                                </div>
                                            </div>
                                            <!--status typed part-->
                                            <div class="chat-typed"><i class="typicn-chat"></i> Jane smith is typing...</div>
                                            <!--input part-->
                                            <div class="chat-input">
                                                <div class="chat-desc muted">Lorem ipsum dolor sit amet.</div>
                                                <textarea class="input-block-level" placeholder="chat here..."></textarea>
                                            </div>
                                        </div>
                                        <div class="divider-content"><span></span></div>
                                    </div><!--chat-->
                                    
                                    <!--contact-->
                                    <div class="tab-pane fade" id="contact">
                                        <div class="side-contact">
                                            <!--contact-control-->
                                            <div class="contact-control">
                                                <div class="btn-group pull-right">
                                                    <button class="dropdown-toggle bg-transparent no-border" data-toggle="dropdown">
                                                        <i class="icofont-caret-down"></i>
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="#"><i class="icofont-certificate color-green"></i> Online</a></li>
                                                        <li><a href="#"><i class="icofont-certificate color-silver-dark"></i> Ofline</a></li>
                                                        <li><a href="#"><i class="icofont-certificate color-red"></i> Busy</a></li>
                                                        <li><a href="#"><i class="icofont-certificate color-orange"></i> Idle</a></li>
                                                    </ul>
                                                </div>
                                                <h5><i class="icofont-comment color-green"></i> John Doe</h5>
                                            </div><!--/contact-control-->
                                            <!--contact-search-->
                                            <div class="contact-search">
                                                <div class="input-icon-prepend">
                                                    <div class="icon">
                                                        <button type="submit">
                                                            <i class="typicn-message color-silver-dark"></i>
                                                        </button>
                                                    </div>
                                                    <input class="input-block-level grd-white" maxlength="11" type="text" name="contact-search" placeholder="chat with..." />
                                                </div>
                                            </div><!--/contact-search-->
                                            <!--contact-list, we set this max-height:380px, you can set this if you want-->
                                            <ul class="contact-list">
                                                <li class="contact-alt grd-white">
                                                    <!--we use data toggle tab for navigate this action-->
                                                    <a href="#chat" data-toggle="tab" data-id="iin@mail.com">
                                                        <!--we use contact-item structure like the component media in bootstrap-->
                                                        <div class="contact-item">
                                                            <div class="pull-left">
                                                                <img class="contact-item-object" style="width: 32px;height: 32px;" src="img/user-thumb-mini.jpg">
                                                            </div>
                                                            <div class="contact-item-body">
                                                                <div class="status" title="busy"><i class="icofont-certificate color-red"></i></div>
                                                                <p class="contact-item-heading bold">Iin T.</p>
                                                                <p class="help-block"><small class="muted">Team Leader</small></p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li class="contact-alt grd-white">
                                                    <!--we use data toggle tab for navigate this action-->
                                                    <a href="#chat" data-toggle="tab" data-id="sungep@mail.com">
                                                        <div class="contact-item">
                                                            <div class="pull-left">
                                                                <img class="contact-item-object" style="width: 32px;height: 32px;" src="img/user-thumb-mini.jpg">
                                                            </div>
                                                            <div class="contact-item-body">
                                                                <div class="status" title="idle"><i class="icofont-certificate color-orange"></i></div>
                                                                <p class="contact-item-heading bold">Sungep</p>
                                                                <p class="help-block"><small class="muted">UI designer</small></p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li class="contact-alt grd-white">
                                                    <!--we use data toggle tab for navigate this action-->
                                                    <a href="#chat" data-toggle="tab" data-id="harab@mail.com">
                                                        <div class="contact-item">
                                                            <div class="pull-left">
                                                                <img class="contact-item-object" style="width: 32px;height: 32px;" src="img/user-thumb-mini.jpg">
                                                            </div>
                                                            <div class="contact-item-body">
                                                                <div class="status" title="ofline"><i class="icofont-certificate color-silver-dark"></i></div>
                                                                <p class="contact-item-heading bold">Harab</p>
                                                                <p class="help-block"><small class="muted">Team Leader</small></p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li class="contact-alt grd-white active"> <!-- you can use this for active contact or your self status-->
                                                    <!--we use data toggle tab for navigate this action-->
                                                    <a href="#chat" data-toggle="tab" data-id="janesmith@mail.com">
                                                        <div class="contact-item">
                                                            <div class="pull-left">
                                                                <img class="contact-item-object" style="width: 32px;height: 32px;" src="img/user-thumb-mini.jpg">
                                                            </div>
                                                            <div class="contact-item-body">
                                                                <div class="status" title="online"><i class="icofont-certificate color-green"></i></div>
                                                                <p class="contact-item-heading bold">Jane smith</p>
                                                                <p class="help-block"><small class="muted">Data analyst</small></p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li class="contact-alt grd-white">
                                                    <!--we use data toggle tab for navigate this action-->
                                                    <a href="#chat" data-toggle="tab" data-id="mahardika@mail.com">
                                                        <div class="contact-item">
                                                            <div class="pull-left">
                                                                <img class="contact-item-object" style="width: 32px;height: 32px;" src="img/user-thumb-mini.jpg">
                                                            </div>
                                                            <div class="contact-item-body">
                                                                <div class="status" title="online"><i class="icofont-certificate color-green"></i></div>
                                                                <p class="contact-item-heading bold">Mahardika</p>
                                                                <p class="help-block"><small class="muted">PHP Developer</small></p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li class="contact-alt grd-white">
                                                    <!--we use data toggle tab for navigate this action-->
                                                    <a href="#chat" data-toggle="tab" data-id="opytama@mail.com">
                                                        <div class="contact-item">
                                                            <div class="pull-left">
                                                                <img class="contact-item-object" style="width: 32px;height: 32px;" src="img/user-thumb-mini.jpg">
                                                            </div>
                                                            <div class="contact-item-body">
                                                                <div class="status" title="ofline"><i class="icofont-certificate color-silver-dark"></i></div>
                                                                <p class="contact-item-heading bold">Opytama</p>
                                                                <p class="help-block"><small class="muted">PHP Developer</small></p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>
                                            </ul><!--/contact-list-->
                                        </div>
                                    </div><!--/contact-->
                                    
                                    <!--alternative 1-->
                                    <div class="tab-pane fade" id="alt1">
                                        <div class="divider-content"><span></span></div> <!--divider-->
                                        
                                        <button class="btn btn-block btn-mini btn-primary">Add Action</button>
                                        <button class="btn btn-block btn-mini">Add Action</button>
                                        
                                        <div class="divider-content"><span></span></div> <!--divider-->
                                        
                                        <!-- side-task -->
                                        <div class="side-task">
                                            <div class="task active">
                                                <span class="task-header">
                                                    <img src="img/loader_16.gif" /> 
                                                    <strong>Portofolio_W34GF.zip</strong>
                                                </span>
                                                <span class="task-desc">9.1 of 17MB - 243KB/sec - 1 min</span>
                                                <div class="progress progress-striped active" rel="tooltip" title="40%">
                                                    <div class="bar bar-success" style="width: 40%;"></div>
                                                </div>
                                            </div>
                                            <div class="task fade in">
                                                <i class="icofont-ok-sign color-green" title="success"></i>
                                                <span class="task-desc">Paralax_bg_5448.jpg</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="icofont-ok-sign color-green" title="success"></i>
                                                <span class="task-desc">Widget_sidebar_W0089.psd</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="icofont-remove-sign color-red" title="failed"></i>
                                                <span class="task-desc">Widget_sidebar_W0089.psd</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="typicn-loop color-silver-dark" title="cancel"></i>
                                                <span class="task-desc">Widget_sidebar_W0089.psd</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="typicn-loop color-silver-dark" title="cancel"></i>
                                                <span class="task-desc">Widget_sidebar_W0089.psd</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="icofont-ok-sign color-green" title="success"></i>
                                                <span class="task-desc">Icons_bg_I98GH.jpg</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                            <div class="task fade in">
                                                <i class="icofont-remove-sign color-red" title="failed"></i>
                                                <span class="task-desc">Dashboard_3805.jpg</span>
                                                <button data-dismiss="alert" class="close">&times;</button>
                                            </div>
                                        </div><!-- /side-task -->
                                        
                                        <div class="divider-content"><span></span></div> <!--divider-->
                                        
                                    </div><!--/alternative 1-->
                                    
                                </div>
                            </div><!-- /sidebar-right-content -->
                        </div><!-- /sidebar-right -->
                    </aside><!-- /side-right -->
                </div><!-- /span side-right -->
            </div>
        </section>
        
        <!-- section footer -->
        <footer>
            <a rel="to-top" href="#top"><i class="icofont-circle-arrow-up"></i></a>
        </footer>

        <!-- javascript
        ================================================== -->
        <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/uniform/jquery.uniform.js"></script>
        
        <script src="js/pricing-table/prefixfree.js"></script> <!-- this required for scale animated where thumbnails hover -->
        <script src="js/prettyPhoto/jquery.prettyPhoto.js"></script>
        <script src="js/filterable/filterable.js"></script>
        <script src="js/filterable/jquery.easing.1.3.js"></script>
         
        <!-- required sms template js, for full feature-->
        <script src="js/holder.js"></script>
        <script src="js/sms-base.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                // try your js
                
                // uniform
                $('[data-form=uniform]').uniform();
                
                // gallery setup
                $('.gallery-selector').change(function(){
                    checked = $(this).attr('checked');
                    checked = (checked == undefined) ? false : true ;
                    
                    $('input.selecter, .gallery-selector').attr('checked', checked);
                    $.uniform.update('.gallery-selector');
                    
                    // toggle class for thumbnail
                    thumbnail = $('input.selecter').attr('checked', checked).next();
                    if(checked == true){
                        thumbnail.addClass('active');
                    }
                    else{
                        thumbnail.removeClass('active')
                    }
                });
                
                $('.thumbnail-control .controls').click(function(e){
                    selecter = $(this).parent().parent().prev();
                    checked  = selecter.attr('checked');
                    if(checked == undefined){
                        checked = true;
                    }
                    else{
                        checked = false;
                        $('.gallery-selector').attr('checked', checked);
                        $.uniform.update('.gallery-selector');
                    }
                    
                    $(selecter).attr('checked', checked);
                    thumbnail = $(selecter).next();
                    if(e.target.nodeName == 'DIV'){
                        thumbnail.toggleClass('active');
                    }
                });
                
                // get data
                $('.getDataSelected').click(function(){
                    data = $('input.selecter[checked=checked]').serialize(); // or you can use serializeArray()
                    alert(data);
                })
                
                
                // prettyPhoto
                $("a[rel^='prettyPhoto']").prettyPhoto();
                
                // filterable
                $('#portfolio-list').filterable({
                    tagSelector : '.portfolio-filter a.filterable'
                });
                $('.portfolio-filter a').click(function(){
                    return false;
                });
            });
        </script>
    </body>
</html>
